<body>
    <h1>0</h1>
</body>
<script>
    setInterval(function(){
        fontObj=document.createElement('span')
        fontObj.className='font'
        var abArr=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
        var max=abArr.length-1
        var min=0
        fontObj.innerText = abArr[Math.floor( Math.random()*(max-min+1)+min )]
        // var min = 0
        // var max = 25
        // var index = Math.floor(  Math.random() * (max-min+1)+min )
        // fontObj.innerText = 'ABCDEFGHIJKLMNOPQRSTUVWSYZ'.split('')[index] 

        var leftMin=0
        var leftMax=(window.innerWidth || document.documentElement.clientWidth)
        var left=Math.floor( Math.random()*(leftMax-leftMin+1)+leftMin)
        var topMin=0
        var topMax=(window.innerWidth || document.documentElement.clientWidth)
        var top=Math.floor( Math.random()*(topMax-topMin+1)+topMin)
        fontObj.style.position='absolute'
        fontObj.style.left=left+'px'
        fontObj.style.top=top+'px'
        document.body.appendChild(fontObj)
    }, 1000)
    document.body.onkeyup=function(evt){
        var e=evt || window.event
        console.log(e.key)
        var fonts=document.querySelectorAll('span.font')
        fonts.forEach(function(item){
            if(item.innerText===e.key){
                document.body.removeChild(item)
                var num=parseInt(document.querySelector('h1').innerText)
                document.querySelector('h1').innerText=num+1
            }
        })
    }
</script>